if (!$.cookie('token')) {
    window.location.href = './shopunknwo.html'
}

class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            thumbPicPath: '',
            name:'',
            kc:'',
             labels:'',
             val:'',
             state:1,
             scid:-1,
            publishhouse:'',
            author:'',
            orders:1,
            describe:'',
            code:'',
            unit:'',
            isnew: GetQueryString('isnew') == 0,
            bollowed: 0,
            filecode: 0,  //0封面图 1详情图 2轮播图
            id: 0,
            finishupload: !1,
            uploadword: '上传',
            btntypehtml:[],
            btnchecklist:[],
            imglist: [],
            detailimg: [],
            detaillist: [], //存的是base64数组
            swiperimg: [],
            swiperimglist: []//存的是base64数组
            ,pagesize:10000,
            awards:-1,
            masters:-1,
            start:0,
            lid:'',
            isrecommend:0,
            agefrom:0,
             ageto:0,
             PICS:'',
            ismember:"F"

        
        };
    }

    clickupload(e) {
        // console.log(e, 'clickupload');
        this.setState({
            filecode: e
        }, () => { $('#file').click(); })

    }
    // 排序
    // toorder(id){
    //     let {ishide} = this.state;
    //     $('#ishide'+id).toggle();
    //     console.log(ishide,'hide');
    //     this.setState({ishide});
    //     $("#"+id).val('');
    // }
    // setcategoryorder(id){
    //     let order = $("#"+id).val(),data;
    
    //     if(isNaN(order)||order<1||order>999){
    //         alert('请输入1-999的正整数');
    //         return;
    //     }
    //     order = Math.floor(order);
    //    data={id,order};
    //     myiconsetorder(data,res=>{
    //         if(res.issuccess==1){
    //             console.log("设置成功");
    //         }
    //     });

    // }

    getbook(id){
       
        var id = GetQueryString("id");



            if (id != '0' && id != "null") {
              
                // this.state.id = id;
                var {pagesize,start,ismember} = this.state,that=this;
                getdetail({ id,pagesize,start }, res => {
                    if (res.issuccess == 1) {
                        var goods = res.list;
                        goods.forEach((x,i)=>{
                            if(x.id ==id){
                                let src=''
                                if(x.thumbPicPath.indexOf('http')==-1){
                                    src=`${API_HEAD}imgs/`+x.thumbPicPath
                                }else{
                                    src=x.thumbPicPath
                                }
                                ismember=x.ismember
                                $(`input[name='ismember'][value=${ismember}]`).prop("checked", "checked");

                                this.setState({
                                    thumbPicPath: src,
                                    finishupload: !0,
                                    bollowed: x.bollowed,
                                    describe: x.describe,
                                    orders:x.orders,
                                    name: x.name,
                                    kc: x.kc,
                                    author:x.author,
                                    labels:x.labels,
                                    publishhouse:x.publishhouse,
                                    code: x.code ,
                                    id:x.id,
                                    state:x.state,
                                    isrecommend:x.isrecommend,
                                    agefrom:x.agefrom,
                                    ageto:x.ageto,
                                    labels:x.labels,
                                    awards:x.awards,
                                    masters:x.masters,
                                    marsters:x.marsters,
                                    PICS: x.thumbPicPath,
                                    isbn10:x.isbn10,
                                    isbn13:x.isbn13,
                                    ismember,

                                    // detailimg:x.detaillist
                                  
            
                                                    })
                            if (x.detaillist != null && x.detaillist.length > 0) {
                               
                                that.putlistdata(1, x.detaillist.split(','))
                            }
                            }
                            
                            // if (goods.swiperlist != null && goods.swiperlist.length > 0) {
                            //     that.putlistdata(2, res.goods.swiperlist.split(','))
                            // }
                            // if(goods.btntype.length>0){
                            //    let arr=  goods.btntype.split(',');
                            //    arr.forEach(x=>{
                            //        $('#'+x).attr('checked',true)
                            //    })
                            // }
                        })
                        // console.log(goods)
                        // console.log(goods.detaillist)
                        var {detailimg} = this.state;
                        // console.log(detailimg);
                        
    
                        
                    } else {
                        alert('商品不存在')
                        window.location.href = './main.html'
                    }
    
                })
    
            }
        

    }

    changebtntype(name){
       
        // let {btnchecklist}=this.state;
        let btnchecklist = {btnchecklist} = [];
     
        
        // console.log(btnchecklist.indexOf(name)>-1,'btnchecklist.indexOf(name)>-1');
        
        if(btnchecklist.indexOf(name)>-1){
            
            let index = btnchecklist.indexOf(name);
            btnchecklist.splice(index,1)
            $('#'+name).attr('checked',false)
        }else{
            btnchecklist.push(name) 
            $('#'+name).attr('checked',true)
        }
        // console.log(btnchecklist,'btnchecklist');
        
        this.setState({btnchecklist})

        
        
    }

    //type 0头图 1详情图 2轮播图
    putlistdata(type, target) {
        var that = this;
        // console.log(type,target)
        target.forEach((x, i) => {
           
            if (type == 0) {
                that.setState({ thumbPicPath: x })
                
            } else {
                var base64prop = 'detaillist'
                    , prop = 'detailimg'
                    , list = that.state[prop]
                    , src = `${x}`
                    , onclicktap = that.del_detail_img.bind(that, list.length);
                if (type == 2) {
                    base64prop = 'swiperimglist';
                    prop = 'swiperimg';
                    list = that.state[prop];
                    onclicktap = that.del_swiper_img.bind(that, list.length);
                }
                if (!isBase64(src)) {
                    if (src.indexOf(`${API_HEAD}`) == -1&&src.indexOf('http')==-1) {
                        src = `${API_HEAD}imgs/${src}`
                    }
                }
                var base64list = that.state[base64prop];
                base64list.push(src);
               
                list.push(
                    <div className={prop + "_div index" + list.length} key={list.length}>
                       {/* {console.log({src})}  */}
                       <div className="img">
                        <img key={list.length} src={src} className="img-responsive" />
                    </div>
                        <img key={"close_" + list.length} className='closeimg' onClick={onclicktap} src='./src/img_close.png' />
                    </div>
                )
                that.setState({
                    [base64prop]: base64list,
                    [prop]: list
                })
            }
        });

    }



    filechange(e) {
        this.setState({
            finishupload: !1,
            uploadword: "上传"
        })
        var that = this;
        var filecode = this.state.filecode;
        // console.log(filecode, 'filecode');
        var filedata = $('#file')[0].files[0];

        var reader = new FileReader();
        reader.readAsDataURL(filedata);
        reader.onload = function (e) {
            var base64str = e.target.result;
            that.putlistdata(filecode, [base64str])
        }
    }

    //

    del_detail_img(e) {
        var that = this;
        if (e == -1) {
            //删除封面图
            this.setState({
                thumbPicPath: '',
            })
            return;
        }
        // console.log('delete e', e);

        var detailimg = [];
        var detaillist = this.state.detaillist;
        detaillist.splice(e, 1);
        detaillist.forEach((x, i) => {
            // console.log(x);
            detailimg.push(
                <div className={"detailimg_div index" + i} key={i}>
                    <div className="img">
                        <img key={i} src={x} className="img-responsive" />
                    </div>
                    <img key={"close_" + i} className='closeimg' onClick={that.del_detail_img.bind(that, i)} src='./src/img_close.png' />
                </div>
            )
        })
        that.setState({
            detailimg,
            detaillist,

        })

    }


    // del_swiper_img(e) {
    //     var that = this;
    //     var swiperimg = [];
    //     var swiperimglist = this.state.swiperimglist;
    //     swiperimglist.splice(e, 1);
    //     swiperimglist.forEach((x, i) => {
    //         swiperimg.push(
    //             <div className={"detailimg_div index" + i} key={i}>
    //                 <img key={i} src={x} className="img-responsive" />
    //                 <img key={"close_" + i} className='closeimg' onClick={that.del_swiper_img.bind(that, i)} src='./src/img_close.png' />
    //             </div>
    //         )
    //     })
    //     that.setState({
    //         swiperimg,
    //         swiperimglist,

    //     })

    // }


    doupload(type, list) {
        var that = this, newlist = list;
        list.forEach((x, i) => {
            if (isBase64(x)) {
                uploadimg(x, res => {
                    // console.log(res)
                    if (res.issuccess == 1) {
                        if (type == 0) {
                            that.setState({
                                 thumbPicPath: `${API_HEAD}imgs/${res.path}`,
                                 PICS:`${res.path}`
                         })
                            return;
                        } else {
                            newlist[i] = `${res.path}`;
                            $(`.${type == 1 ? 'detail' : 'swiper'}img_div.index${i} .img-responsive`).attr('src', `${API_HEAD}imgs/${res.path}`)
                        }
                    } else {
                        alert(res.msg);
                        return;
                    }
                   
                })
            }
        });
        if (type != 0) {
            var prop = `${type == 1 ? 'detail' : 'swiper'}imglist`;
            that.setState({ [prop]: newlist })
        }
    }

    upload() {
        var that = this
            , reallist = []
            , { thumbPicPath, detaillist, swiperimglist } = this.state


        if (thumbPicPath.length > 0 && isBase64(thumbPicPath)) {  //封面图
            that.doupload(0, [thumbPicPath]);
        }
        if (detaillist.length > 0) {
            that.doupload(1, detaillist)
        }
        if (swiperimglist.length > 0) {
            that.doupload(2, swiperimglist)
        }
        that.setState({
            uploadword: `上传成功`,
            finishupload: !0
        })
        // console.log(thumbPicPath,detaillist)
    }



    submit() {
        var { state,thumbPicPath, describe,orders, labels,publishhouse,author,code, bollowed,kc, name, detaillist, finishupload,id,scid,awards,masters,val,isrecommend,
            agefrom,ageto,PICS,isbn10,isbn13,ismember} = this.state
            , err = ''
            if(awards==null)awards=-1
            if(masters==null)masters=-1
            
        //   if(detaillist.length==0) err = '请添加详情图片';
        if (thumbPicPath.length == 0) err = '请添加头图';
        if (describe.length == 0) err = '请填写描述';
        // if(awards==-1&&masters==-1){
        //     err="大奖作品或名家大师选一个"
        // }else{
        //     if(awards.length==1&&masters.length==1)err="大奖作品和名家大师只能选一个";
        // }
        if (!finishupload) err = '请上传图片';
        if(orders==""){
            orders='1';
        }
        if(isNaN(orders)||orders<1||orders>999){
            alert('请填写1-999的整数');
            return;
        }
        if(isNaN(agefrom)||agefrom<0||agefrom>100){
            alert('请填写0-100的整数');
            return;
        }
        if(isNaN(ageto)||ageto<0||ageto>100){
            alert('请填写0-100的整数');
            return;
        }
        orders = Math.floor(orders);
        if(!kc||kc<=0)err="请填写大于0的库存数"
        if(!isbn10&&!isbn13){
            if (!code||code.length == 0) err = '请填写商品编码';
        }
        if (name.length == 0) err = '请填写姓名';
        if (err.length > 0) {
            alert(err);
            return;
        }
        detaillist = detaillist.join(',')

        var submitdata = {
            thumbPicPath: PICS, bollowed, describe, name,kc, code,labels:labels+`,`+val,publishhouse,author,orders,
             detaillist,id,scid,awards,masters,state,isrecommend,agefrom,ageto,isbn10,isbn13,ismember
        }
   
        if (this.state.id > 0) submitdata['id'] = this.state.id;
        addgoods(submitdata, res => {
            if (res.issuccess == 1) {
                alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                window.location.href='./main.html'
            }
        })
    }



    componentDidMount() {
        var id = GetQueryString("id");
        // console.log(id)
        var that = this;
        var {pagesize,start}=this.state;
        getawrad({pagesize,start},res => {
            if (res.issuccess == 1) {
                
                var categoryhtml = [];
                categoryhtml.push(
                    <option key={-1} value={-1}>请选择
                    </option>
                );
                res.list.forEach((x, i) => {
                    categoryhtml.push(
                        <option key={i} value={x.typename} id={x.id}>{x.typename}
                        </option>
                    )
                })
                
                that.setState({ categoryhtml });
                
            }
        })
        getmaster({pagesize,start},res => {
            if (res.issuccess == 1) {
                
                var categoryhtml2 = [];
                categoryhtml2.push(
                    <option key={-1} value={-1}>请选择
                    </option>
                );
                res.list.forEach((x, i) => {
                    categoryhtml2.push(
                        <option key={i} value={x.typename} id={x.id}>{x.typename}
                        </option>
                    )
                })
                
                that.setState({ categoryhtml2 });
                
            }
        })
        var  {pagesize,start} = this.state;
        getlabellist(res => {
            if (res.issuccess == 1) {
                
                var categoryhtml1 = [];
                categoryhtml1.push(
                    <option key={-1} value={-1}>请选择
                    </option>
                );
                res.list.forEach((x, i) => {
                    // console.log(i)
                    categoryhtml1.push(
                        <option key={i} value={x.name} id={x.id}>{x.name}
                        </option>
                    )
                    // console.log(x.id)
                })
                
                that.setState({ categoryhtml1 });
              
                
            }
        })
        let {ismember}=this.state
        $(`input[name='ismember'][value=${ismember}]`).prop("checked", "checked");
        this.getbook(id);

    }

    // inputchange(e, x) {
    //     console.log(e,x.target.value)
    //     var prop = 
    //     e == 0 ? 'name' : 
    //     e == 1 ? "code" : 
    //     e == 2 ? "author" : 
    //     e == 3 ? "publishhouse" : 
    //     e == 4 ? "labels" :
    //     e == 5 ? "describe":
    //     e == 7 ? "orders":

       
    //     this.setState({
    //         [prop]: x.target.value
    //     })
    // }
    inputchangename(e){
        // console.log(e.target.value)
       this.setState({
           name:e.target.value
       })

    }
    inputchangecode(e){
        this.setState({
           code:e.target.value
        })
        
    }
    inputchangeauthor(e){ 
        this.setState({
           author:e.target.value
        })
    }
    inputchangepublishhouse(e){
        this.setState({
            publishhouse:e.target.value
        })
        
    }
    inputchangedescrible(e){
        this.setState({
            describe:e.target.value
        })
        
    }
    inputchangeorders(e){
        this.setState({
           orders:e.target.value
        })
    }
   bollwedchange(e) {
        // console.log(e);
        this.setState({
            bollowed: e
        })

    }
    statechange(e) {
        // console.log(e);
        this.setState({
            state: e
        })

    }
   inputkcchange(e) {
        // console.log(e.target.value);
        this.setState({
           kc: e.target.value
        })

    }
    tuijian(e){
        // console.log(e);
            this.setState({
                isrecommend:e
            })
    }
    zuixiao(e){
        // console.log(e.target.value);
        this.setState({
            agefrom:e.target.value
        })
    }
    zuida(e){
        // console.log(e.target.value);
        this.setState({
            ageto:e.target.value
        })
    }
    oncouponchange(e){
        
        this.setState({ cancoupon: e.target.value })
    }

    oncategorychange(e) {
            // console.log(e.target.value)
        this.setState({ awards: e.target.value })
    }

    oncategorychanges1(e) {

            // console.log(e.target.value)
        this.setState({ labels: e.target.value
            })
         
    }
    oncategoryschange(e) {
        // console.log(e.target.value, 'changegg');
        this.setState({ masters: e.target.value })
    }
    onsubcategorychanges(e){
        this.setState({ val: e.target.value
        })
    }
    oncategorychanges1(e) {
        // console.log( e.target.value)
        this.setState({
            labels:e.target.value
        })

        var cid = $('.sle>option:selected').attr('id');
        var val = $('.sle>option:selected').attr('value');
       if($('.sle>option').attr('value')==-1){
        $('.sle>option').innerHTML=val;
       }

        // console.log(val)
        // console.log(cid)
            var {pagesize,start,lid} = this.state;
            // console.log(lid)

            
            
            getlabelslist(cid, res => {
            var scid = -1;
            if (res.issuccess == 1) {                           
                var subcategoryhtml = [];               
                if(res.list.length>0){ 
                    subcategoryhtml.push(
                        <option key={-1} value={-1}>请选择
                        </option>
                    )          
                    res.list.forEach((x, i) => { 
                        // console.log(x)                      
                        subcategoryhtml.push(
                            <option key={i} value={x.name}>{x.name}
                            </option>
                        )
                    });
                    $(".subcategory").show();                  
                    this.setState({subcategoryhtml});
                   
                }else{
                    
                    this.setState({scid});
                    $(".subcategory").hide();
                    
                }           
                
            }else{
               
                this.setState({scid});
                $(".subcategory").hide();
                
            }
        })
    }
    inputchangeradio(prop, e) {
        console.log(prop, 'prop')
        console.log(e.target.value, 'eeee')
        this.setState({ [prop]:e.target.value }) 
    }
    del() {
        // $('#myModal').modal('toggle');
        delgoods(this.state.id, res => {
            // console.log(res);
            if (res.issuccess == 1) {
                window.location.href = './main.html'
            }

        })
    }
    confirmdel() {
        delgoods(this.state.id, res => {
            // console.log(res);
            if (res.issuccess == 1) {
                window.location.href = './main.html'
            }

        })
    }
    render() {
        let {btntypehtml} = this.state;
        //  <img style={{display:this.state.thumbPicPath.length>0?"block":"none"}} src={this.state.thumbPicPath} className="img-responsive"  /> 

        return (
            <div className="breadLinebox">
                <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div className='breadLine '>
                        当前位置 > 商品管理 > {this.state.id == 0 ? "新建" : "编辑"}图书
                    </div>

                    <div className="content form">
                        <div className="formtitle">
                            <p>{this.state.id > 0 ? "编辑" : "新建"}</p>
                        </div>
                        <div className="formbox">
                            <div className="formcontent">
                                <div className="input-group">
                                    <span className="input-group-addon">图书名称</span>
                                    <input id='name' onChange={this.inputchangename.bind(this)} value={this.state.name} type="text" placeholder='请输入图书名称'  className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书编码</span>
                                    <input id='name' onChange={this.inputchangecode.bind(this)} value={this.state.code} type="text" placeholder='请输入图书条形码'  className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书作者</span>
                                    <input id='name' onChange={this.inputchangeauthor.bind(this)} type="text" value={this.state.author} placeholder='请输入图书作者'  className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书出版社</span>
                                    <input id='name' onChange={this.inputchangepublishhouse.bind(this)} type="text" value={this.state.publishhouse} placeholder='请输入图书出版社'  className="input" />
                                </div>
                                 <div className="input-group">
                                    <span className="input-group-addon">图书出版社</span>
                                    <div className="mallradiobox" >
                                        <select value={this.state.labels} onChange={this.oncategorychanges1.bind(this)} className="form-control select">
                                            {this.state.categoryhtml1}
                                        </select>
                                    </div>
                                </div>
                                <div className="input-group" style={{display:"none"}}>
                                    <span className="input-group-addon">二级分类</span>
                                    <div className="mallradiobox" >
                                        <select value={this.state.val} onChange={this.onsubcategorychanges.bind(this)} className="form-control select">
                                        {this.state.subcategoryhtml}
                                        </select>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书简介</span>
                                    <textarea id='describe' onChange={this.inputchangedescrible.bind(this)} value={this.state.describe} style={{ height: "30vh" }} className="form-control" placeholder='请输入图书简介' rows="3"></textarea>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">库存</span>
                                    <input onChange={this.inputkcchange.bind(this)} type="text" value={this.state.kc} placeholder='请输入图书库存' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书状态</span>
                                    <div className="radiobox">
                                        <div className="radio"><input type="radio" name="radio" id="inlineCheckbox1" onChange={this.bollwedchange.bind(this, 0)} checked={this.state.bollowed == 0} value="0"/><label for="inlineCheckbox1"></label><span>可借阅</span></div>
                                        <div className="radio"><input type="radio" name="radio" id="inlineCheckbox2" onChange={this.bollwedchange.bind(this, 1)} checked={this.state.bollowed == 1} value="1" /><label for="inlineCheckbox2"></label><span>不可借阅</span></div>
                                        <div className="radio"><input type="radio" name="radio" id="inlineCheckbox3" onChange={this.bollwedchange.bind(this, 2)} checked={this.state.bollowed == 2} value="2" /><label for="inlineCheckbox3"></label><span>借完</span></div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">图书状态</span>
                                    <div className="radiobox">
                                        <div className="radio"><input type="radio" name="radio" id="stateCheckbox1" onChange={this.statechange.bind(this, 0)} checked={this.state.state == 0} value="0"/><label for="stateCheckbox1"></label><span>上架</span></div>
                                        <div className="radio"><input type="radio" name="radio" id="stateCheckbox2" onChange={this.statechange.bind(this, 1)} checked={this.state.state == 1} value="1" /><label for="stateCheckbox2"></label><span>下架</span></div>
                                        <div className="radio"><input type="radio" name="radio" id="stateCheckbox3" onChange={this.statechange.bind(this, 2)} checked={this.state.state == 2} value="2" /><label for="stateCheckbox3"></label><span>售完</span></div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">是否设为推荐</span>
                                    <div className="radiobox">
                                        <div className="radio"><input type="radio" name="radio" id="isrecommendbox1" onChange={this.tuijian.bind(this, 0)} checked={this.state.isrecommend == 0} value="0"/><label for="isrecommendbox1"></label><span>未推荐</span></div>
                                        <div className="radio"><input type="radio" name="radio" id="isrecommendbox2" onChange={this.tuijian.bind(this, 1)} checked={this.state.isrecommend == 1} value="1" /><label for="isrecommendbox2"></label><span>推荐</span></div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">是否会员观看</span>
                                    <div className="radiobox" onChange={this.inputchangeradio.bind(this,'ismember')}>
                                        <div className="radio"><input type="radio" name="ismember" value="T" id="ismember1" /><label for="ismember1"></label><span>是</span></div>
                                        <div className="radio"><input type="radio" name="ismember" value="F" id="ismember2" /><label for="ismember2"></label><span>否</span></div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">年龄专区</span>
                                    <div>
                                            从<input type="text"  onChange={this.zuixiao.bind(this)} checked={this.state.isrecommend == 0} value={this.state.agefrom} style={{width:50}} className="age"/> 岁
                                            ~到<input type="text"  onChange={this.zuida.bind(this)} checked={this.state.isrecommend == 1} value={this.state.ageto} style={{width:50}}  className="age"/> 岁
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">大奖作品</span>
                                    <div className="mallradiobox" >
                                        <select  value={this.state.awards} onChange={this.oncategorychange.bind(this)} className="form-control select">
                                            {this.state.categoryhtml}
                                        </select>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">名家大师</span>
                                    <div className="mallradiobox" >
                                        <select value={this.state.masters} onChange={this.oncategoryschange.bind(this)} className="form-control select">
                                            {this.state.categoryhtml2}
                                        </select>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">商品图片</span>
                                    <input onChange={this.filechangeimg.bind(this, '3')} type='file' id='file3' style={{ display: "none" }} />
                                    <div className='detail_btns'>
                                        <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, '3')} style={{ display: this.state.fileimgshow ? "" : "none" }} />
                                        <div className="img_warp" style={{ display: this.state.fileimgshow ? "none" : "" }}>
                                            <img src={imgsrc} className="img" />
                                            <img className='closeimg' onClick={this.del_img.bind(this, '3')} src='./src/img_close.png' style={{ display: this.state.fileimgshow ? "none" : "" }} />
                                        </div>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <p className="lbtit"><span className="label input-group-addon">商品轮播</span><span className="red">(375 x 300)</span></p>
                                    <input onChange={this.filechangeimg.bind(this, '1')} type='file' id='file1' style={{ display: "none" }} />
                                    <div className='detail_btns lbimgbox'>
                                        <div>
                                            {lbhtml}
                                        </div>
                                        <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, '1')} />
                                    </div>
                                </div>

                            </div>
                            <div className="submitbox">
                                <button type="button" onClick={this.submit.bind(this)} className="submitbutton cursor">提交</button>
                                {/* <button type="button" onClick={this.torole.bind(this)} className="submitbutton cursor" style={{ marginLeft: '100' }}>返回</button> */}
                            </div>

                        </div>
                    </div>








                    <div className='inputs panel-body'>
                        <h3>{this.state.id == 0 ? "新建" : "编辑"}图书</h3>
                        <div className="input-group">
                            <span className="input-group-addon">图书名称</span>
                            <input id='name' onChange={this.inputchangename.bind(this)} value={this.state.name} type="text" placeholder='请输入图书名称' className="form-control" />
                        </div>
                        <div className="input-group">
                            <span className="input-group-addon">图书编码</span>
                            <input id='name' onChange={this.inputchangecode.bind(this)} value={this.state.code} type="text" placeholder='请输入图书条形码' className="form-control" />
                        </div>
                        {/* <div className="input-group input-group">
                            <span className="input-group-addon ">单价</span>
                            <input id='price' onChange={this.inputchange.bind(this, 1)} value={this.state.price} type="text" placeholder='请输入图书单价' className="form-control kc" />
                        </div> */}

                        {/* <div className="input-group input-group">
<span className="input-group-addon ">邮费</span>
<input id='postfee' onChange={this.inputchange.bind(this,2)}type="text" value={this.state.postfee} placeholder='请输入库存' className="form-control kc" />
</div> 

 <div className="input-group input-group">
<span className="input-group-addon ">包邮额度</span>
<input id='postamount' onChange={this.inputchange.bind(this,5)}type="text" value={this.state.postamount} placeholder='请输入库存' className="form-control kc" />
</div>  */}

                        <div className="input-group input-group">
                            <span className="input-group-addon ">图书作者</span>
                            <input id='color' onChange={this.inputchangeauthor.bind(this)} type="text" value={this.state.author} placeholder='请输入图书作者' className="form-control " />
                        </div>
                        <div className="input-group input-group">
                            <span className="input-group-addon ">图书出版社</span>
                            <input id='color' onChange={this.inputchangepublishhouse.bind(this)} type="text" value={this.state.publishhouse} placeholder='请输入图书出版社' className="form-control " />
                        </div>
                        
                        {/* 标签用英文逗号相隔 */}
                        {/* <div className="input-group input-group">
                            <span className="input-group-addon ">图书标签</span>
                            <input id='color' onChange={this.inputchange.bind(this, 4)} type="text" value={this.state.labels} placeholder='请输入图书标签' className="form-control " /><br/>
                            <p classname="help-block">*多个图书标签请用英文逗号隔开</p>
                        </div> */}
                        <div className="input-group">
                            <span className="input-group-addon desc">图书标签</span>
                            <select value={this.state.labels} onChange={this.oncategorychanges1.bind(this)} className="form-control select sle">
                                     {this.state.categoryhtml1}
                            </select>
                        </div>
                        <div className="input-group subcategory" style={{display:"none"}}>
                            <span className="input-group-addon desc">二级分类</span>
                            <select value={this.state.val} onChange={this.onsubcategorychanges.bind(this)} className="form-control select">
                                {this.state.subcategoryhtml}
                            </select>
                            
                        </div>
                        
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">图书简介</span>
                            <textarea id='describe' onChange={this.inputchangedescrible.bind(this)} value={this.state.describe} style={{ height: "30vh" }} className="form-control" placeholder='请输入图书简介' rows="3"></textarea>
                        </div>
                        
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">库存</span>
                            <input  onChange={this.inputkcchange.bind(this)} type="text" value={this.state.kc} placeholder='请输入图书库存' className="form-control " />
                        </div>
                        <div className="input-group input-group ">
                         
                        <span className="input-group-addon desc">排序</span>
                        <input  onChange={this.inputchangeorders.bind(this)} type="text" value={this.state.orders} placeholder='请输入图书排序' className="form-control " /> 

                
                        </div>
                        {/* <div className="input-group input-group ">
                            <span className="input-group-addon desc">按钮组类型</span>
                            <div className='btntype'>
                            {btntypehtml}
                            </div>
                        </div> */}

                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">图书状态</span>
                            <div>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox1" onChange={this.bollwedchange.bind(this, 0)} checked={this.state.bollowed == 0} value="0"/> 可借阅
</label>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox2" onChange={this.bollwedchange.bind(this, 1)} checked={this.state.bollowed == 1} value="1" /> 不可借阅
</label>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox3" onChange={this.bollwedchange.bind(this, 2)} checked={this.state.bollowed == 2} value="2" /> 借完
</label>
                            </div>
                        </div>
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">图书状态</span>
                            <div>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox1" onChange={this.statechange.bind(this, 0)} checked={this.state.state == 0} value="0"/> 上架
</label>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox2" onChange={this.statechange.bind(this, 1)} checked={this.state.state == 1} value="1" /> 下架
</label>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox3" onChange={this.statechange.bind(this, 2)} checked={this.state.state == 2} value="2" /> 售完
</label>
                            </div>
                        </div>
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">是否设为推荐</span>
                            <div>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox1" onChange={this.tuijian.bind(this, 0)} checked={this.state.isrecommend == 0} value="0"/> 未推荐
</label>
                                <label className="radio-inline">
                                    <input type="radio" id="inlineCheckbox2" onChange={this.tuijian.bind(this, 1)} checked={this.state.isrecommend == 1} value="1" /> 推荐
</label>
                                
                            </div>
                        </div>
                        <div className="input-group countrys">
                            <span className="input-group-addon desc">是否会员观看</span>
                            <div className="countryname" onChange={this.inputchangeradio.bind(this,'ismember')}>


                            <label className="radio-inline">
                                    <input type="radio" name="ismember" value="T"/> 是
</label>
                                <label className="radio-inline">
                                    <input type="radio" name="ismember" value="F"/> 否
</label>


                            {/* <div  className="radio-inline"><input type="radio" name="ismember" value="T"/><span>是</span></div>
                            <div  className="radio-inline"><input type="radio" name="ismember" value="F"/><span>否</span></div> */}
                            </div>
                        </div>
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">年龄专区</span>
                            <div>
                                    从<input type="text"  onChange={this.zuixiao.bind(this)} checked={this.state.isrecommend == 0} value={this.state.agefrom} style={{width:50}} className="age"/> 岁
                                    ~到<input type="text"  onChange={this.zuida.bind(this)} checked={this.state.isrecommend == 1} value={this.state.ageto} style={{width:50}}  className="age"/> 岁
                            </div>
                        </div>

                        <div className="input-group">
                            <span className="input-group-addon desc">大奖作品</span>
                            <select value={this.state.awards} onChange={this.oncategorychange.bind(this)} className="form-control select">
                                     {this.state.categoryhtml}
                            </select>
                        </div>
                        <div className="input-group">
                            <span className="input-group-addon desc">名家大师</span>
                            <select value={this.state.masters} onChange={this.oncategoryschange.bind(this)} className="form-control select">
                                 {this.state.categoryhtml2}
                            </select>
                        </div>


                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">上传封面图</span>
                            <input onChange={this.filechange.bind(this)} type='file' id='file' />
                            <div className='img_warp' >
                                <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, 0)} style={{ display: this.state.thumbPicPath.length > 0 ? "none" : "" }} />
                                <div className="img">
                                    <img style={{ display: this.state.thumbPicPath.length > 0 ? "block" : "none" }} src={this.state.thumbPicPath} className="img-responsive" />
                                </div>
                                <img className='closeimg thumb' style={{ display: this.state.thumbPicPath.length > 0 ? "block" : "none" }} onClick={this.del_detail_img.bind(this, -1)} src='./src/img_close.png' />
                            </div>

                        </div>

                        <div className="input-group input-group imgs">
                            <span className="input-group-addon desc">上传详情图</span>
                            <input onChange={this.filechange.bind(this)} type='file' id='file' />
                            <div className='detail_btns'>
                                <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, 1)} />
                                <div className='img_warp' >
                                    {this.state.detailimg}
                                </div>

                            </div>
                        </div>


                        <div className='btns_bottom center'>
                            <div style={{ display: this.state.thumbPicPath.length > 0 ? "flex" : "none" }} className='btn_upload'>
                                <button onClick={this.upload.bind(this)}
                                    className={`btn add btn-${this.state.finishupload ? "success" : "primary"} center w20`} id='btnimg_save'>{this.state.uploadword}</button>

                            </div>
                            <button className='btn add btn-primary center w20' onClick={this.submit.bind(this)} id='btnimg_save'>保存</button>
                            {/* {console.log(this.state.id)} */}
                            <button onClick={this.del.bind(this)} style={{ display: this.state.id == 0 ? "none" : "" }} className='btn add btn-danger center w20' >  删除</button>
                        </div>
                    </div>


                    {/* <div className="content form">
                        <div className="formtitle">
                            <p>{this.state.id > 0 ? "编辑" : "新建"}</p>
                        </div>
                        <div className="formbox">
                            <div className="formcontent">
                                <div className="input-group">
                                    <span className="input-group-addon">角色名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'name')} value={name} type="text" placeholder='请输入角色名称' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">权重</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'number')} value={number} type="text" placeholder='请输入0-100的数字' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">用户权限</span>
                                    <div onChange={this.inputchange.bind(this, 'power')} className="radiobox">
                                        {inputhtml}
                                    </div>
                                </div>
                            </div>
                            <div className="submitbox">
                                <button type="button" onClick={this.submit.bind(this)} className="submitbutton cursor">提交</button>
                                <button type="button" onClick={this.torole.bind(this)} className="submitbutton cursor" style={{ marginLeft: '100' }}>返回</button>
                            </div>

                        </div>
                    </div> */}







                </div>
            </div>

        )
    }
}


ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='2' /> */}
        <LeftMenu code='books' />
        <Book />
    </div>
    , $('.container')[0]
)